<template>
  <!-- 导航栏 -->
  <tn-navbar placeholder fixed bg-color="rgba(0,0,0,0)" :bottom-shadow="false">
    <template #back></template>
  </tn-navbar>
  <!-- 添加动画场景 -->
  <view class="animation-scene">
    <!-- 主要场景 -->
    <view class="scene-content">
      <!-- 标题 -->
      <view class="title-container">
        <text class="main-title">挪个车嘛</text>
        <text class="sub-title">一键呼叫 · 即刻挪车</text>
      </view>

      <!-- 停车场景 -->
      <view class="parking-scene">
        <!-- 被挡住的车 -->
        <view class="blocked-car">
          <view class="car-body blue">
            <view class="car-roof"></view>
            <view class="car-window"></view>
            <view class="wheels">
              <view class="wheel wheel-left"></view>
              <view class="wheel wheel-right"></view>
            </view>
            <!-- 添加表情 -->
            <view class="car-face sad">
              <view class="eyes"></view>
              <view class="mouth"></view>
            </view>
          </view>
        </view>

        <!-- 挡路的车 -->
        <view class="blocking-car">
          <view class="car-body red">
            <view class="car-roof"></view>
            <view class="car-window"></view>
            <view class="wheels">
              <view class="wheel wheel-left"></view>
              <view class="wheel wheel-right"></view>
            </view>
          </view>
        </view>

        <!-- 对话框 -->
        <view class="dialog-bubble">
          <text>挪个车嘛~</text>
        </view>

        <!-- 扫码动画 -->
        <!--				<view class="scan-effect">-->
        <!--					<view class="qr-frame"></view>-->
        <!--					<view class="scan-line"></view>-->
        <!--				</view>-->
      </view>

      <!-- 装饰元素 -->
      <view class="decoration">
        <view class="dots">
          <view class="dot"></view>
          <view class="dot"></view>
          <view class="dot"></view>
        </view>
      </view>
    </view>
  </view>

  <view class="container">


    <!-- 快捷功能区域 -->
    <view class="quick-actions">
      <view class="action-item" @tap="gourl('/pages/vehicle/list')">
        <view class="action-icon">
          <tn-icon name="taxi" size="56" color="#3467C2"></tn-icon>
        </view>
        <text class="action-text">我的挪车码</text>
      </view>
      <view class="action-item" @tap="gourl('/pages/qrcode/index')">
        <view class="action-icon">
          <tn-icon name="qr-code-circle" size="56" color="#52c41a"></tn-icon>
        </view>
        <text class="action-text">生成挪车码</text>
      </view>
      <view class="action-item" @tap="gourl('/pages/message/index')">
        <view class="action-icon">
          <tn-icon name="message" size="56" color="#fa8c16"></tn-icon>
        </view>
        <text class="action-text">消息中心</text>
      </view>
      <view class="action-item" @tap="gourl('/pages/settings/index')">
        <view class="action-icon">
          <tn-icon name="menu-set" size="56" color="#722ed1"></tn-icon>
        </view>
        <text class="action-text">通知设置</text>
      </view>
    </view>

    <!-- 最近通知区域 -->
    <view class="recent-notifications">
      <view class="section-header">
        <text class="section-title">最近通知</text>
        <text class="view-all" @tap="gourl('/pages/message/index')">查看全部</text>
      </view>

      <view class="notification-list">
        <view v-if="recentNotifications.length === 0" class="empty-notice">
          <text>暂无通知</text>
        </view>
        <view
            v-for="(notification, index) in recentNotifications"
            :key="index"
            class="notification-item"
            @tap="gourl(`/pages/message/detail?id=${notification.id}`)"
        >
          <view class="notification-content">
            <text class="notification-title">挪车请求</text>
            <text class="notification-desc">{{ notification.urgency_status_text }};{{ notification.notes }}</text>
          </view>
          <text class="notification-time">{{ notification.human_time }}</text>
        </view>
      </view>
    </view>

    <!-- 使用指南区域 -->
    <view class="usage-guide">
      <view class="section-header">
        <text class="section-title">使用指南</text>
      </view>

      <view class="guide-steps">
        <view class="guide-step">
          <view class="step-number"  @tap="gourl(`/pages/users/set/set?scene=VtIYKyVS`)">1</view>
          <text class="step-desc">填写车辆信息领取挪车码</text>
        </view>
        <view class="guide-step">
          <view class="step-number">2</view>
          <text class="step-desc">设置通知方式</text>
        </view>
        <view class="guide-step">
          <view class="step-number">3</view>
          <text class="step-desc">打印并贴在车上</text>
        </view>
        <view class="guide-step">
          <view class="step-number">4</view>
          <text class="step-desc">接收挪车通知</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import {onShow} from '@dcloudio/uni-app';
import {navigateTo} from '../../../utils/function';
import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
// 移除实际API导入
// import {recentlyMovedTheCar} from "@/common/api";

// 用户信息
const userInfo = ref({
  avatarUrl: '',
  nickName: '',
  id: ''
});

// 未读消息数量
const unreadCount = ref(2);

// 最近通知
const recentNotifications = ref([]);

// 模拟数据 - 挪车请求记录
const mockNotificationData = {
  records: [
    {
      id: 97,
      user_id: 14,
      qrcode_id: 10,
      qrcode_user_id: 12,
      urgency_status: 0,
      notes: "挡住出口，影响通行，其他原因",
      status: 3,
      update_time: "2025-03-21 20:04:03",
      instime: 1742558603,
      itime: "2025-03-21 20:03:23",
      urgency_status_text: "普通:不急，希望车主看到后尽快处理",
      human_time: "3天前"
    },
    {
      id: 96,
      user_id: 14,
      qrcode_id: 10,
      qrcode_user_id: 12,
      urgency_status: 0,
      notes: "需要外出",
      status: 3,
      update_time: "2025-03-21 14:15:20",
      instime: 1742536184,
      itime: "2025-03-21 13:49:44",
      urgency_status_text: "普通:不急，希望车主看到后尽快处理",
      human_time: "3天前"
    },
    {
      id: 94,
      user_id: 14,
      qrcode_id: 10,
      qrcode_user_id: 12,
      urgency_status: 0,
      notes: "影响通行，挡住出口，维修需要",
      status: 0,
      update_time: "2025-03-21 13:48:20",
      instime: 1742368661,
      itime: "2025-03-19 15:17:41",
      urgency_status_text: "普通:不急，希望车主看到后尽快处理",
      human_time: "5天前"
    }
  ],
  total: 6
};

// 页面加载时获取数据
onMounted(() => {
});

// 页面显示时刷新数据
onShow(() => {
  getRecentNotifications();
});

// 获取最近通知
const getRecentNotifications = async () => {
  // 使用模拟数据替代API调用
  setTimeout(() => {
    // 模拟异步加载
    recentNotifications.value = mockNotificationData.records;
  }, 300);
};

// 获取未读消息数量
const getUnreadCount = () => {
  // 实际项目中应调用API获取未读消息数量
  // 这里使用模拟数据
  unreadCount.value = 2;
};

// 处理登录
const handleLogin = () => {
  // 实际项目中应调用微信登录API
  uni.showToast({
    title: '正在登录...',
    icon: 'loading'
  });

  setTimeout(() => {
    getUserInfo();
    uni.showToast({
      title: '登录成功',
      icon: 'success'
    });
  }, 1500);
};

const gourl = (url) => {
  navigateTo(url);
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
}

.home__back {
  width: 100%;
  height: 394rpx;
  background: url('https://mp-dc64023d-3f12-4b11-bd2e-c726cd84eaae.cdn.bspapp.com/WX-XCX/banner.png');
  background-size: cover;
  position: relative;

  &--right, &--left {
    position: absolute;
    overflow: hidden;
  }

  &--left {
    left: 0;
    bottom: 18rpx;
    width: 206rpx;
    height: 300rpx;
    z-index: 3;
    border-radius: 0 0 90rpx 0;
  }

  &--right {
    right: 10rpx;
    bottom: 30rpx;
    width: 180rpx;
    height: 170rpx;
    animation: slide-in-br 1s infinite alternate;
  }

  &__conten {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    color: #0E2D6D;

    &--title {
      font-size: 60rpx;
      font-weight: bold;
    }

    &--name {
      padding: 20rpx 0;
    }
  }
}


.home__title {
  color: #3467C2;
  font-size: 46rpx;
  padding: 100rpx 0 62rpx 0;
  font-weight: bold;
  letter-spacing: 6px;
  text-align: center;
}

.user-info-section {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;
}

.avatar-container {
  margin-right: 20rpx;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
}

.user-details {
  flex: 1;
}

.username {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5rpx;
}

.user-id {
  font-size: 24rpx;
  color: #999;
}

.login-btn {
  background-color: #1aad19;
  color: white;
  font-size: 28rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
}

.quick-actions {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.action-icon {
  width: 90rpx;
  height: 90rpx;
  border-radius: 24rpx;
  margin-bottom: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease;
  
  &:active {
    transform: scale(0.95);
  }
}

.action-text {
  font-size: 24rpx;
  color: #666;
  margin-top: 8rpx;
}

.badge {
  position: absolute;
  top: -6rpx;
  right: -6rpx;
  background-color: #ff4d4f;
  color: white;
  font-size: 20rpx;
  min-width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  border-radius: 16rpx;
  padding: 0 6rpx;
}

.recent-notifications {
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.view-all {
  font-size: 24rpx;
  color: #1aad19;
}

.empty-notice {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200rpx;
  color: #999;
  font-size: 28rpx;
}

.notification-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.notification-desc {
  font-size: 24rpx;
  color: #666;
  display: block;
}

.notification-time {
  font-size: 24rpx;
  color: #999;
  margin-left: 20rpx;
}

/* 使用指南区域样式 */
.usage-guide {
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  padding: 30rpx;
}

.guide-steps {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.guide-step {
  width: 48%;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.step-number {
  width: 40rpx;
  height: 40rpx;
  background-color: #1aad19;
  color: white;
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  margin-right: 10rpx;
}

.step-desc {
  font-size: 26rpx;
  color: #666;
}

.animation-scene {
  width: 100%;
  height: 300rpx;
  background: linear-gradient(135deg, #4A90E2, #3467C2);
  position: relative;
  overflow: hidden;
}

.scene-content {
  width: 100%;
  height: 100%;
  position: relative;
}

// 标题样式
.title-container {
  position: absolute;
  left: 40rpx;
  top: 30rpx;
  z-index: 2;

  .main-title {
    font-size: 48rpx;
    color: #ffffff;
    font-weight: bold;
    display: block;
    margin-bottom: 10rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
    animation: popIn 0.5s ease-out;
  }

  .sub-title {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.9);
    display: block;
    animation: slideIn 0.5s ease-out 0.2s both;
  }
}

// 停车场景
.parking-scene {
  position: absolute;
  right: 30rpx;
  bottom: 40rpx;
  width: 400rpx;
  height: 160rpx;
}

// 基础汽车样式
.car-body {
  width: 120rpx;
  height: 50rpx;
  border-radius: 25rpx;
  position: relative;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);

  &.blue {
    background: #5C9EFF;
  }

  &.red {
    background: #FF7875;
  }

  .car-roof {
    position: absolute;
    width: 70rpx;
    height: 35rpx;
    background: inherit;
    top: -20rpx;
    left: 25rpx;
    border-radius: 35rpx 35rpx 0 0;
  }

  .car-window {
    position: absolute;
    width: 40rpx;
    height: 20rpx;
    background: #a8d5ff;
    top: -15rpx;
    left: 40rpx;
    border-radius: 10rpx 10rpx 0 0;
  }

  .wheels {
    position: absolute;
    bottom: -8rpx;
    width: 100%;

    .wheel {
      width: 16rpx;
      height: 16rpx;
      background: #333;
      border-radius: 50%;
      position: absolute;

      &.wheel-left {
        left: 20rpx;
      }

      &.wheel-right {
        right: 20rpx;
      }
    }
  }

  // 车脸表情
  .car-face {
    position: absolute;
    width: 40rpx;
    height: 20rpx;
    left: 40rpx;
    top: 15rpx;

    &.sad .eyes {
      &::before, &::after {
        content: '';
        position: absolute;
        width: 8rpx;
        height: 8rpx;
        background: #333;
        border-radius: 50%;
        animation: blinking 3s infinite;
      }

      &::before {
        left: 0;
      }

      &::after {
        right: 0;
      }
    }

    &.sad .mouth {
      width: 16rpx;
      height: 16rpx;
      border: 3rpx solid #333;
      border-radius: 50%;
      border-top-color: transparent;
      transform: rotate(45deg);
      position: absolute;
      top: 8rpx;
      left: 12rpx;
    }
  }
}

// 被挡住的车
.blocked-car {
  position: absolute;
  left: 40rpx;
  bottom: 20rpx;
  animation: carShake 2s ease-in-out infinite;
}

// 挡路的车
.blocking-car {
  position: absolute;
  right: 40rpx;
  bottom: 20rpx;
  animation: carSlide 3s ease-in-out infinite;
}

// 对话框
.dialog-bubble {
  position: absolute;
  left: 20rpx;
  top: -40rpx;
  background: #fff;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #333;
  animation: bobbing 2s ease-in-out infinite;

  &::after {
    content: '';
    position: absolute;
    bottom: -10rpx;
    left: 20rpx;
    border: 10rpx solid transparent;
    border-top-color: #fff;
  }
}

// 扫码效果
.scan-effect {
  position: absolute;
  right: 60rpx;
  top: 20rpx;
  width: 80rpx;
  height: 80rpx;

  .qr-frame {
    width: 100%;
    height: 100%;
    border: 4rpx solid #fff;
    border-radius: 10rpx;
    opacity: 0.8;
    animation: pulse 2s infinite;
  }

  .scan-line {
    position: absolute;
    width: 100%;
    height: 4rpx;
    background: #fff;
    top: 0;
    animation: scanning 1.5s ease-in-out infinite;
  }
}

// 动画关键帧
@keyframes carShake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5rpx);
  }
  75% {
    transform: translateX(5rpx);
  }
}

@keyframes carSlide {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-30rpx);
  }
}

@keyframes bobbing {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5rpx);
  }
}

@keyframes blinking {
  0%, 45%, 55%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.1);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

@keyframes scanning {
  0% {
    top: 0;
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes popIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slideIn {
  0% {
    transform: translateX(-20rpx);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
</style>